<template>

    <div class="list">
        <div class="item"
             v-for="(item, index) of list"
             :key="index"
        >
            <div class="item-title border-bottom">
                <i class="item-title-icon"></i>
                {{item.title}}
            </div>
            <div class="item-detail-info border-bottom"
                 v-for="(detail, index) of item.children"
                 :key="index"
            >
                <div class="desc">{{detail.title}}</div>
                <div class="price">
                    <span class=sign>￥</span>
                    <span class="money">{{detail.price}}</span>
                    <span class="unit">起</span>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
export default {
  name: 'DetailList',
  props: {
    list: Array
  }
}
</script>

<style scoped lang='stylus'>
    @import '~@/assets/styles/mixins.styl';
    .item {
        .item-title {
            line-height : 0.8rem
            font-size : .32rem
            padding : 0 0.2rem
        }
        .item-title-icon {
            position : relative
            top : 0.06rem
            left : 0.06rem
            display : inline-block
            width : 0.36rem
            height : 0.36rem
            background : url('http://s.qunarzz.com/piao/image/touch/sight/detail.png') 0 -0.45rem no-repeat
            margin-right : 0.1rem
            background-size : 0.4rem 3rem
        }
        .item-children {
            padding-left : 0.2rem
        }
        .item-detail-info {
            line-height : 0.8rem
            display : flex
            justify-content : space-between
            padding : 0 0.3rem 0 0.7rem
            .desc {
                flex : 1
                font-size : .32rem
                ellipsis()
            }
            .price {
                width : 1.7rem
                text-align : right
                .sign {
                    color : #ff9900
                    font-size : 0.25rem
                }
                .money {
                    color : #ff9800
                    font-size : 0.4rem
                    padding : 0 0.05rem
                }
                .unit {
                    color : #9e9e9e
                    font-size : 0.25rem
                }
            }
        }
    }
</style>
